<template>
  <a-card :bordered="false" title="">
    <this-table
      ref="table"
      @on-perms="openPermsModal"
      @on-edit="onEdit"
      @on-add="onAdd"
    />
    <edit-modal ref="edit-modal" @refresh="refresh" />
    <perms-modal ref="perms-modal" @refresh="refresh" />
    <add-modal ref="add-modal" @refresh="refresh" />
  </a-card>
</template>

<script>
import thisTable from './table'
import editModal from './modal/edit.vue'
import permsModal from './modal/perms.vue'
import addModal from './modal/add.vue'

export default {
  components: { thisTable, permsModal, editModal, addModal },
  methods: {
    openPermsModal(row) {
      this.$refs['perms-modal'].open(row)
    },
    refresh() {
      this.$refs.table.refresh()
    },
    onAdd() {
      this.$refs['add-modal'].open()
    },
    onEdit(row) {
      this.$refs['edit-modal'].open(row)
    },
  },
}
</script>

